<template>
	<div class="tinymce-container editor-container" :class="{fullscreen:fullscreen}">
		<textarea class="tinymce-textarea" :id="tinymceId"></textarea>
		<div class="editor-custom-btn-container">
			<el-button v-if="preview" size="small" type="text" @click="previewCallback()">查看原文</el-button>
			<el-button v-if="!preview" size="small" type="text" @click="getImg">插入图表</el-button>
			<el-button  size="small" type="text" @click="setNews">插入资讯</el-button>
			<!-- <el-button v-if="!preview" size="small" type="text" @click="setUploadVideo">上传视频</el-button> -->
			<el-button size="small" type="text" @click="dialogVisible = true">预览</el-button>
		</div>
		<el-dialog title="资讯预览" :visible.sync="dialogVisible" width="80%" style="margin-top: -6rem;" append-to-body :close-on-click-modal=false  @open="openPreview">
			<el-tabs v-model="activeName" type="card" @tab-click="handlePreviewTabClick">
				<el-tab-pane label="手机预览" name="first">
					<el-card class="preview phone">
						<div class="top-bar">资讯预览</div>
						<div class="title">{{data.title}}</div>
						<div class="info">
							<span>来源：{{formatSource(data.source)}}&emsp;</span>
							<span>发布时间：{{data.updateTime}}</span>
						</div>
						<div class="summary">摘要：{{data.summary}}</div>
						<div class="content">
							<p v-html="data.content"></p>
						</div>
					</el-card>
				</el-tab-pane>
				<el-tab-pane label="PC预览" name="second">
					<el-card class="preview pc">
						<div class="title">{{data.title}}</div>
						<div class="info">
							<span>来源：{{formatSource(data.source)}}&emsp;</span>
							<span>发布时间：{{data.updateTime}}</span>
						</div>
						<div class="summary">摘要：{{data.summary}}</div>
						<div class="content">
							<p v-html="data.content"></p>
						</div>
					</el-card>
				</el-tab-pane>
			</el-tabs>
		</el-dialog>
		<el-dialog title="插入资讯" :visible.sync="dialogGetNews" width="50%" style="margin-top: -6rem; z-index: 1999" append-to-body :close-on-click-modal=false @close="handleCloseNewsDiag">
      <el-tabs v-model="activeTabName" @tab-click="handleTabClick">
        <el-tab-pane label="资讯" name="news"></el-tab-pane>
        <el-tab-pane label="专题" name="topic"></el-tab-pane>
      </el-tabs>
			<el-form :model="listQuery" label-width="70px" class="zxForm">
				<el-col :span="8">
					<el-form-item :label="activeTabName=='news'?'资讯名称':'专题名称'" prop="title">
						<el-input v-model.trim="listQuery.title" placeholder="请输入" @keyup.enter.native="searchTabList" clearable></el-input>
					</el-form-item>
				</el-col>
        <template v-if="activeTabName=='news'">
          <el-col :span="8">
            <el-form-item label="中心词" prop="keyword">
              <el-input v-model.trim="listQuery.keyword" placeholder="请输入" @keyup.enter.native="getList" clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="个股" prop="secname">
              <el-input v-model.trim="listQuery.secname" placeholder="请输入" @keyup.enter.native="getList" clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="行业" prop="industry">
              <el-input v-model.trim="listQuery.industry" placeholder="请输入" @keyup.enter.native="getList" clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="概念" prop="concept">
              <el-input v-model.trim="listQuery.concept" placeholder="请输入" @keyup.enter.native="getList" clearable></el-input>
            </el-form-item>
          </el-col>
        </template>
        <el-col :span="8">
          <el-button style="margin-left: 70px;" type="primary" icon="el-icon-search" @click="searchTabList">搜索</el-button>
        </el-col>
			</el-form>

			<!--<el-row :gutter="20" style="margin-bottom: 12px;">
				<el-col :span="24">
					<el-input v-model.trim="listQuery.title" type="text" placeholder="请输入资讯标题搜索" @keyup.enter.native="getList">
						<el-button slot="append" icon="el-icon-search" @click='getList'></el-button>
					</el-input>
				</el-col>
			</el-row>-->
			<el-table :data="tableData" v-loading="listLoading" element-loading-text="加载中..." border fit highlight-current-row
			 @current-change="handleClick" style="width: 100%" height="500">
				<el-table-column type="index" width="50"></el-table-column>
				<!--<el-table-column prop="title" label="资讯标题" align="center" className="chooseRow" show-overflow-tooltip></el-table-column>-->
				<el-table-column :label="activeTabName=='news'?'资讯名称':'专题名称'" align="center" show-overflow-tooltip className="chooseRow">
					<template slot-scope="scope">
            <template   v-if="activeTabName==='news'">
              <el-button class="preview-button" type="text" @click="showInfo(scope.row)">{{ scope.row.title}}</el-button>
            </template>
            <template v-else>
              <el-button class="preview-button" type="text" @click="handleShow(scope.row, 'show')">{{ scope.row.seminarName }}</el-button>
            </template>
					</template>
				</el-table-column>
				<el-table-column :label="activeTabName=='news'?'资讯id':'专题id'" align="center" show-overflow-tooltip>
          <template slot-scope="scope">
            <template   v-if="activeTabName==='news'">
              <el-button class="preview-button" type="text" >{{ scope.row.news_id}}</el-button>
            </template>
            <template v-else>
              <el-button class="preview-button" type="text" >{{ scope.row.id }}</el-button>
            </template>
          </template>
        </el-table-column>
<!--				<el-table-column prop="source" label="来源" align="center" width="95" show-overflow-tooltip></el-table-column>-->
        <el-table-column  label="更新时间" align="center" width="160" show-overflow-tooltip>
          <template slot-scope="scope">
            <template  v-if="activeTabName==='news'">
              <el-button class="preview-button" type="text" >{{ scope.row.update_time}}</el-button>
            </template>
            <template v-else>
              <el-button class="preview-button" type="text">{{ scope.row.updateTime }}</el-button>
            </template>
          </template>
        </el-table-column>
			</el-table>
			<div class="pagination-container">
				<el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="listQuery.pageNum"
				 :page-sizes="[10,20,30,50]" :page-size="listQuery.pageSize" layout="total, sizes, prev, pager, next, jumper"
				 :total="total"></el-pagination>
			</div>
			<el-form :rules="rules" ref="newsForm" :model="tarNews" label-width="80px" style="margin-top: 20px;">
				<el-col :span="24">
					<el-form-item :label="activeTabName=='news'?'资讯名称':'专题名称'" prop="title">
						<el-input v-model.trim="tarNews.title" placeholder="请选择"></el-input>
					</el-form-item>
				</el-col>
<!--				<el-col :span="12">-->
<!--					<el-form-item label="资讯id" prop="news_id">-->
<!--						<el-input readonly v-model="tarNews.news_id" placeholder="请选择"></el-input>-->
<!--					</el-form-item>-->
<!--				</el-col>-->
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="dialogGetNews = false">取消</el-button>
				<el-button type="primary" @click="saveNews">确定</el-button>
			</div>
			<el-dialog append-to-body :fullscreen='true' :title="infoTitle" :visible.sync="dialogInfo">
				<div v-if='dialogInfo'>
					<component :is="currentView" :infoMsg='infoMsg' @closeFile='closeFile'></component>
				</div>
			</el-dialog>
		</el-dialog>
		<el-dialog title="插入图表" :visible.sync="dialogGetImg" append-to-body :closeOnClickModal='false' class="chartsDialog">
			<el-form ref="imgForm" :rules="imgRules" :model="imgForm" label-width="80px" >
				<el-form-item label="指数代码" prop="code">
					<el-select
						clearable
						v-model="imgForm.code"
						remote
						reserve-keyword
						:remote-method="filterMethod"
						filterable
						placeholder="请输入选择">
						<el-option v-for="item in optionStocks" :key="item.code" :label="item.name+'('+item.code+')'" :value="item.code"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="图表类型" prop="imgType">
					<el-select v-model="imgForm.imgType" type="text" placeholder="请选择">
						<el-option v-for="(item, index) in imgTypes" :key="item.index" :label="item.label" :value="item.value"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="图表日期" prop="time" v-if='imgForm.imgType == 2'>
					<el-date-picker
						v-model="imgForm.date"
						type="date"
						value-format="yyyyMMdd"
						placeholder="选择日期">
					</el-date-picker>
				</el-form-item>
			</el-form>
			<div v-show="showPreview" ref="kChart" style="width: 560px;height: 375px;"></div>
			<div v-show="showImg">
				<img :src="myBase" />
			</div>
			<div slot="footer" class="dialog-footer">
				<el-button @click="dialogGetImg = false">取消</el-button>
				<el-button type="warning" :loading="previewLoading" @click="getPreview">{{ previewText }}</el-button>
				<el-button type="primary" :loading="insertLoading" @click="insertImg">确定</el-button>
			</div>
		</el-dialog>
		<!-- <el-dialog title="上传视频" :visible.sync="dialogGetVideo" width="50%" append-to-body :close-on-click-modal='false' >
			<div class="video-wraper">
				<div class="tabs">
					<div class="tab-item" @click="videoTabLabelIndex=0" :class="{actived:videoTabLabelIndex===0}">本地上传</div>
					<div class="tab-item" @click="videoTabLabelIndex=1" :class="{actived:videoTabLabelIndex===1}">网络链接</div>
				</div>
				<div class="upload-wrap">
					<template v-if="videoTabLabelIndex===0">
						<el-form ref="videoForm" :model="videoFileForm" label-width="80px" >
							<el-form-item label="视频文件">
								<el-upload class="video-uploader"
									:action="uplopdFileUrl"
									name="file"
									ref='uploadvideo'
									:on-progress="uploadVideoProcess"
									:on-success="handleVideoSuccess"
									:before-upload="beforeUploadVideo"
									:limit="1"
									:multiple="false"
									:show-file-list="false">
									<video v-if="videoForm.showVideoPath !='' && !videoFlag"
										v-bind:src="videoForm.showVideoPath"
										class="video video-avatar"
										controls="controls">
										您的浏览器不支持视频播放
									</video>
									<i v-else-if="videoForm.showVideoPath =='' && !videoFlag"
									class="el-icon-plus video-uploader-icon "></i>
									<el-progress v-if="videoFlag == true"
												type="circle"
												v-bind:percentage="videoUploadPercent"
												style="margin-top:7px;"></el-progress>
								</el-upload>
							</el-form-item>
						</el-form>
					</template>
					<template v-else>
						<el-form ref="videoForm" :model="videoFileForm" label-width="80px" >
							<el-form-item label="网络链接">
								<el-input placeholder="请输入网络连接" v-model="videoFileForm.url"></el-input>
							</el-form-item>
						</el-form>
					</template>
				</div>
			</div>
			<div slot="footer" class="dialog-footer">
				<el-button @click="dialogGetVideo = false">取消</el-button>
				<el-button type="primary" :loading="insertLoading" @click="insertVideo">确定</el-button>
			</div>
		</el-dialog> -->
    <el-dialog :fullscreen='true' style="z-index: 2161" :title="textMap[dialogTopicStatus]" :visible.sync="dialogTopicVisible" append-to-body :close-on-click-modal=false :closeOnClickModal='false'>
      <el-form ref="temp" :model="temp" label-position="left" label-width="80px" style='margin: auto; max-width: 1200px'>
        <el-row :gutter="24">
          <el-col :span="12">
            <el-form-item label="专题名称" prop="seminarName">
              <el-input v-model.trim="temp.seminarName" type="text" placeholder="请输入" disabled :maxlength='50'></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="专题类型" prop="type">
              <el-select v-model="temp.type" placeholder="请选择" disabled>
                <el-option label="人工专题" :value='0'></el-option>
                <!-- <el-option label="智能专题" :value='1'></el-option> -->
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="置顶时间" prop="topTime">
              <el-date-picker v-model="temp.topTime" type="datetime" value-format="yyyy-MM-dd HH:mm:ss" placeholder="选择日期时间" disabled></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="专题描述" prop="descript">
              <el-input v-model="temp.descript" type="textarea" :rows="3" :maxlength='200' placeholder="请输入" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="专题资讯" prop="news">
              <el-table v-loading="tagLoading" element-loading-text="加载中..." stripe max-height="500" :data="temp.news" style="width: 100%" border fit highlight-current-row>
                <el-table-column label="资讯标题" align="center" min-width="150">
                  <template slot-scope="scope">
                    <el-button class="preview-button" type="text" @click="showInfo(scope.row)">{{ scope.row.title }}</el-button>
                  </template>
                </el-table-column>
                <el-table-column prop="summary" label="资讯摘要" align="center" show-overflow-tooltip min-width="150"></el-table-column>
                <el-table-column prop="update_time" label="更新时间" align="center" width="100"></el-table-column>
                <el-table-column align="center" label="资讯状态" min-width="80">
                  <template slot-scope="scope">
                    <el-tag size="small" :type="checkNews(scope.row.news_status)">{{checkNewsStatu(scope.row.news_status)}}</el-tag>
                  </template>
                </el-table-column>
                <el-table-column prop="is_original" label="资讯类型" align="center">
                  <template slot-scope="scope">
                    <span v-if="scope.row.is_original == 0">原创资讯</span>
                    <span v-else-if="scope.row.is_original == 1">智能资讯</span>
                    <span v-else>机器写稿</span>
                  </template>
                </el-table-column>
                <!--<el-table-column label="操作" align="center" width="150" v-if="dialogStatus !== 'show'" key="2">
                  <template slot-scope="scope">
                    <el-button size="mini" type="danger" @click="deleteRow(scope.$index, temp.news)">删除</el-button>
                  </template>
                </el-table-column>-->
              </el-table>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="专题配图" prop="picUrl">
              <img :src="temp.picUrl" class="avatar">
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogTopicVisible = false">关闭</el-button>
      </div>
      <el-dialog append-to-body :fullscreen='true' :title="infoTitle" :visible.sync="dialogInfo">
        <div v-if='dialogInfo'>
          <component :is="currentView" :infoMsg='infoMsg' @closeFile='closeFile'></component>
        </div>
      </el-dialog>
    </el-dialog>
	</div>
</template>

<script>

	import editorImage from './components/editorImage'
  import { listNewsInfo,listTopicInfo, kxInfo, listStockSc, uploadSec, fsInfo } from '../../api/article'
  import {  getEdit} from '@/api/project'
	import { baseUrl, isPord } from '../../utils/request'
	import plugins from './plugins'
	import toolbar from './toolbar'
	import echarts from 'echarts'
	import pinyin from 'pinyin'
	import fsOption from './fsMethod'
	import kxOption from './kxMethod'
	import intellPreview from '../../views/project/intellPreview'
	import origPreview from '../../views/project/origPreview'
	import roboPreview from '../../views/project/roboPreview'

	export default {
	  name: 'tinymce',
	  components: {
	    editorImage,
	    intellPreview,
	    origPreview,
	    roboPreview
	  },
	  props: {
	    data: {
	      type: Object,
	      required: false,
	      default() {
	        return {}
	      }
	    },
	    sourceDict: {
	      type: Array,
	      required: false,
	      default() {
	        return {}
	      }
	    },
	    id: {
	      type: String
	    },
	    value: {
	      type: String,
	      default: ''
	    },
	    preview: {
	      type: Boolean,
	      required: false,
	      default: false
	    },
	    previewCallback: {
	      type: Function,
	      required: false,
	      default: null
	    },
	    toolbar: {
	      type: Array,
	      required: false,
	      default() {
	        return []
	      }
	    },
	    menubar: {
	      default: 'file edit insert view format table'
	    },
	    height: {
	      type: Number,
	      required: false,
	      default: 360
	    }
	  },
	  data() {
	    return {
	      hasChange: false,
	      hasInit: false,
	      tinymceId: this.id || 'vue-tinymce-' + +new Date(),
	      fullscreen: false,
	      previewLoading: false,
	      insertLoading: false,
	      previewText: '预览',
	      showPreview: false,
	      previewHTML: '',
	      showImg: false,
	      myBase: '',
	      dialogVisible: false,
	      dialogGetNews: false,
	      dialogGetImg: false,
	      dialogGetVideo: false,
	      activeName: 'first',
	      videoType: 'localVideo',
	      videoTabLabelIndex: 0,
	      total: 0,
	      infoMsg: {},
	      dialogInfo: false,
	      infoTitle: '',
	      currentView: 'intellPreview',
	      myChart: null,
	      listLoading: false,
	      listQuery: {
	        pageNum: 1,
	        pageSize: 20,
	        title: '',
	        keyword: '',
	        secname: '',
	        industry: '',
	        concept: ''
	      },
	      tableData: [],
	      tarNews: {
	        title: '',
	        news_id: '',
	        source_id: ''
	      },
	      imgForm: {
	        imgType: '',
	        code: '',
	        date: ''
	      },
	      imgTypes: [
	        { label: '日行情', value: 1 },
	        { label: '分时行情', value: 2 }
	      ],
	      optionStocks: [],
	      stockAll: [],
	      rules: {
	        title: [{ required: true, message: '请选择资讯',	trigger: 'change' }],
	        news_id: [{ required: true, message: '请选择资讯',	trigger: 'change' }]
	      },
	      imgRules: {
	        code: [{ required: true, message: '请选择指数代码',	trigger: 'change' }],
	        imgType: [{ required: true, message: '请选择图表类型',	trigger: 'change' }]
	      },
	      videoFileForm: {
	        file: null,
	        url: '',
	        uploaded: false ,// 判断是否已上传
          posterUrl:'', //海报封面的URL
          posterLoaded:false  //海报数据是否加载完善
	      },
	      uplopdFileUrl: baseUrl + 'file/oss/content/upload' + '?time=' + (+new Date()),
	      videoFlag: false,
	      // 是否显示进度条
	      videoUploadPercent: '',
	      // 进度条的进度，
	      isShowUploadVideo: false,
	      // 显示上传按钮
	      videoForm: {
	        showVideoPath: ''
	      },
        activeTabName: 'news',
        textMap: {
          show: '专题详情',
          update: '审核专题'
        },
        dialogTopicVisible:false,
        dialogTopicStatus:'show',
        temp: {
          id: '',
          descript: '',
          news: [],
          picUrl: '',
          seminarName: '',
          topTime: '',
          type: 0,
          adjustDesc: ''
        },
        tagLoading: false,
	    }
	  },
	  watch: {
	    value(val, oldval) {
	      if (!this.hasChange && this.hasInit) {
	        this.$nextTick(() => {
	          window.tinymce.get(this.tinymceId).setContent(val)
	        })
	      }
	    }
	  },
	  mounted() {
	    this.initTinymce()
	    this.listQuery = {
	      pageNum: 1,
	      pageSize: 20,
	      title: '',
	      keyword: '',
	      secname: '',
	      industry: '',
	      concept: ''
	    }
	  },
	  activated() {
	    this.initTinymce()
	  },
	  deactivated() {
	    this.destroyTinymce()
	  },
	  methods: {
	    initTinymce() {
	      const _this = this
	      window.tinymce.init({
	        selector: `#${this.tinymceId}`,
	        language: 'zh_CN',
	        height: this.height,
	        body_class: 'panel-body ',
	        content_style: 'p {margin: 0} .sensitive {color: #DF4407;font-weight: bold} img {width:380px;} video {width:100%;height:initial!important;object-fit: cover} ',
	        // object_resizing: false,
	        toolbar: this.toolbar.length > 0 ? this.toolbar : toolbar,
	        menubar: this.menubar,
	        menu: {
	          file: { title: 'File', items: 'newdocument restoredraft | print' },
	          edit: { title: 'Edit', items: 'undo redo | cut copy paste pastetext | selectall' },
	          insert: { title: 'Insert', items: 'image media link inserttable | hr | pagebreak insertdatetime anchor' },
	          view: { title: 'View', items: 'code | visualaid visualblocks visualchars | fullscreen' },
	          format: { title: 'Format', items: 'bold italic underline strikethrough superscript subscript | align | removeformat' },
	          table: { title: 'Table', items: 'inserttable tableprops deletetable | cell row column' }
	        },
	        valid_children: '*[*]',
	        plugins: plugins,
	        end_container_on_empty_block: true,
	        code_dialog_height: 450,
	        code_dialog_width: 1000,
	        plugin_preview_width: 375,
	        plugin_preview_height: 667,
        paste_auto_cleanup_on_paste: true,
        paste_remove_styles: true,
        paste_remove_styles_if_webkit: true,
        paste_strip_class_attributes: true,
        // advlist_bullet_styles: 'square',
	        // advlist_number_styles: 'default',
	        // images_upload_url: baseUrl + 'file/oss/content/upload',
	        images_upload_handler: function(blobInfo, success, failure) {
	          var xhr, formData
	          xhr = new XMLHttpRequest()
	          xhr.withCredentials = false
	          xhr.open('POST', baseUrl + 'file/oss/content/upload')
	          xhr.setRequestHeader('Authorization', 'Bearer ' + _this.$store.getters.token)
	          xhr.onload = function() {
	            var json
	            if (xhr.status !== 200) {
	              failure('HTTP Error: ' + xhr.status)
	              return
	            }
	            json = JSON.parse(xhr.responseText)
	            if (!json || typeof json.location !== 'string') {
	              failure('Invalid JSON: ' + xhr.responseText)
	              return
	            }
	            success(json.location)
	          }
	          formData = new FormData()
	          formData.append('file', blobInfo.blob(), blobInfo.filename())
	          const isJPG = [
	            'image/jpeg',
	            'image/svg+xml',
	            'image/bmp',
	            'image/webp',
	            'image/vnd.dwg',
	            'image/vnd.dxf',
	            'image/gif',
	            'image/jp2',
	            'image/tiff',
	            'image/vnd.svf',
	            'image/png'
	          ].indexOf(blobInfo.blob().type) > -1
	          const isLt2M = blobInfo.blob().size / 1024 / 1024 < 2
	          if (!isJPG) {
	            failure('请上传图片文件！')
	          }
	          if (!isLt2M) {
	            failure('上传文件大小不能超过 2MB!')
	          }
	          if (isJPG && isLt2M) {
	            xhr.send(formData)
	          }
	        },
	        // imagetools_cors_hosts: ['www.tinymce.com', 'codepen.io'],
	        image_advtab: true, // 为图像属性编辑窗口添加高级属性，可以自定义图片的css样式（内置style）、边距（margin）和边框（border）
	        image_dimensions: false, // 显示隐藏图片尺寸input
	        image_description: false, // 显示隐藏图片说明input
	        default_link_target: '_blank',
	        link_title: false,
	        paste_enable_default_filters: false,
	        paste_data_images: true,
	        convert_newlines_to_brs: true,
	        extended_valid_elements: 'img[class|src|border=0|alt|title|hspace|vspace|width=380px|height|align|onmouseover|onmouseout|name]',
	        // paste_as_text: true,
	        media_live_embeds: true,
	        media_dimensions: false,
	        media_poster: true,
	        media_alt_source: true,
	        file_picker_callback: function(cb, value, meta) {
	          if (meta.filetype === 'media') {
	            // 模拟上传本地视频
	            const input = document.createElement('input')
	            input.setAttribute('type', 'file')
	            input.onchange = function() {
	              const file = this.files[0]
	              // console.log(file)
	              // console.log('file***************');
	              _this.uploadVideo(file).then(res => {
	                // console.log(res)
	                // console.log('***************')
	                if (_this.videoFileForm.uploaded) {
	                  cb(_this.videoFileForm.url)
	                } else {
	                  setTimeout(() => {
	                    cb(_this.videoFileForm.url)
	                  }, 1)
	                }
	              }).catch(err => {
	                console.log(err)
	              })
	            }
	            // 触发点击
	            input.click()
	          }else if(meta.filetype==='image') {
              const input = document.createElement('input')
              input.setAttribute('type', 'file')
              input.onchange = function() {
                const file = this.files[0]
                _this.uploadPoster(file).then(res => {

                  if (_this.videoFileForm.posterLoaded) {
                    cb(_this.videoFileForm.posterUrl)
                  } else {
                    setTimeout(() => {
                      cb(_this.videoFileForm.posterUrl)
                    }, 1)
                  }
                }).catch(err => {
                  console.log(err)
                })
              }
              // 触发点击
              input.click()
            }
	        },
	        paste_preprocess: function(plugin, args) {
	          // console.log(args.content)
	          const contentReg2 = new RegExp('<!.*?>', 'g')
	          args.content = args.content.replace(contentReg2, '')
	        },
	        init_instance_callback: editor => {
	          if (_this.value) {
	            editor.setContent(_this.value)
	            editor.undoManager.clear()
	            editor.undoManager.add()
	          }
	          _this.hasInit = true
	          editor.on('NodeChange Change KeyUp SetContent', () => {
	            this.hasChange = true
	            this.$emit('input', editor.getContent())
	          })
	        },
	        setup(editor) {
	          editor.on('BeforeSetContent', function(contentEvent) {
	            // contentEvent.content = contentEvent.content.replace(/^(\s*)?\n(\s*\n)?/, '')
	            // contentEvent.content = contentEvent.content.replace(/(?!<[^>]*)(\r\n|\r|\n)(?![^<]*>)/g, '<br />')
	          })
	          editor.on('FullscreenStateChanged', (e) => {
	            _this.fullscreen = e.state
	          })
	        }
	      })
	    },
      handlePreviewTabClick(node){
        if(node.paneName==='0'){
          this.$nextTick(()=>{
            let strongs = document.querySelectorAll('.preview.phone .content>p strong')
            for (let i = 0; i <strongs.length ; i++) {
              if(strongs[i].getAttribute('data-code')){
                let text= strongs[i].innerText
                strongs[i].innerHTML = `<span class="news-keyword">${text}</span>`
              }
            }
          })
        }else{
          this.$nextTick(()=>{
            let strongs = document.querySelectorAll('.preview.pc .content>p strong')
            for (let i = 0; i <strongs.length ; i++) {
              if(strongs[i].getAttribute('data-code')){
                let text= strongs[i].innerText
                strongs[i].innerHTML = `<span class="news-keyword">${text}</span>`
              }
            }
          })
        }
      },
      openPreview(){
        this.$nextTick(()=>{
          let strongs = document.querySelectorAll('.preview.phone .content>p strong')
          console.log(strongs)
          for (let i = 0; i <strongs.length ; i++) {
            if(strongs[i].getAttribute('data-code')){
              let text= strongs[i].innerText
              strongs[i].innerHTML = `<span class="news-keyword">${text}</span>`
            }
          }
        })

        this.$nextTick(()=>{
          let strongs = document.querySelectorAll('.preview.pc .content>p strong')
          for (let i = 0; i <strongs.length ; i++) {
            if(strongs[i].getAttribute('data-code')){
              let text= strongs[i].innerText
              strongs[i].innerHTML = `<span class="news-keyword">${text}</span>`
            }
          }
        })
      },
	    destroyTinymce() {
	      if (window.tinymce.get(this.tinymceId)) {
	        window.tinymce.get(this.tinymceId).destroy()
	      }
	    },
	    setContent(value) {
	      // if (value) {
      window.tinymce.get(this.tinymceId).setContent(value)
      window.tinymce.get(this.tinymceId).undoManager.clear()
      window.tinymce.get(this.tinymceId).undoManager.add()
      // }
	    },
	    getContent() {
	      window.tinymce.get(this.tinymceId).getContent()
	    },
      handleCloseNewsDiag(){
	      this.activeTabName = 'news'
      },
	    imageSuccessCBK(arr) {
	      const _this = this
	      arr.forEach(v => {
	        window.tinymce.get(_this.tinymceId).insertContent(`<img class="wscnph" src="${v.url}" >`)
	      })
	    },
	    formatContent(data) {
	      // debugger;
	      if (!data.content) return
	      // console.log(data)
	      const keyword = []
	      // console.log(data)
	      if (data.newsStockCodes && data.newsStockCodes.length > 0) {
	        keyword.push(data.newsStockCodes.map(val => {
	          return val.replace(/\(\d*(\d{6})\)/, '|$1')
	        }).join('|'))
	      }
	      if (data.newsPlateCodes0 && data.newsPlateCodes0.length > 0) {
	        keyword.push(data.newsPlateCodes0.map(val => {
	          return val.code + '|' + val.name
	        }).join('|'))
	      }
	      if (data.newsPlateCodes1 && data.newsPlateCodes1.length > 0) {
	        keyword.push(data.newsPlateCodes1.map(val => {
	          return val.code + '|' + val.name
	        }).join('|'))
	      }
	      if (data.newsPlateCodes2 && data.newsPlateCodes2.length > 0) {
	        keyword.push(data.newsPlateCodes2.map(val => {
	          return val.code + '|' + val.name
	        }).join('|'))
	      }
	      let content
	      if (data.id) {
	        const classInfos = data.classInfos || []
	        const fenD = classInfos || { name: '' }
        if (fenD.name === '港澳资讯') {
	          content = data.content.replace(/(\r\n)|(\r)|(\n)/g, '<br /><br />')
	        } else {
	          content = data.content
	        }
	      } else { // 新增时不需要排版
	        content = data.content
	      }
	      if (keyword.length === 0) return data.content
	      const contentReg = new RegExp('(?!<[^>]*)(' + keyword.join('|').replace(/\*/g, '\\*') + ')(?![^<]*>)', 'g')
	      // console.log(contentReg)
	      return content.replace(contentReg, '<span class="news-keyword">$1</span>')
	    },
	    formatSource(data) {
	      for (let i = 0; i < this.sourceDict.length; i++) {
	        if (this.sourceDict[i].dictKey === data) return this.sourceDict[i].dictValue
	      }
	      return data
	    },
	    setNews() {
	      this.tarNews = {
	        title: '',
	        news_id: '',
	        source_id: ''
	      }
	      this.dialogGetNews = true
	      this.listLoading = true
	      listNewsInfo(this.listQuery).then(res => {
	        this.listLoading = false
	        this.tableData = res.Data
	        this.total = parseInt(res.PageInfo.Total)
	        this.$nextTick(() => {
	          this.$refs['newsForm'].clearValidate()
	        })
	      })
	    },
	    getImg() {
	      if (!this.stockAll.length) this.getStockList()
	      this.imgForm = {
	        imgType: '',
	        code: '',
	        date: ''
	      }
	      this.showImg = false
	      this.previewText = '预览'
	      this.previewLoading = false
	      this.insertLoading = false
	      this.dialogGetImg = true
	      this.$nextTick(() => {
	        this.$refs['imgForm'].clearValidate()
	      })
	    },
	    getList() {
	      this.listLoading = true
	      listNewsInfo(this.listQuery).then(res => {
	        this.listLoading = false
	        this.tableData = res.Data
	        this.total = parseInt(res.PageInfo.Total)
	      })
	    },
	    handleSizeChange(val) {
	      this.listQuery.pageSize = val
        this.searchTabList()
	    },
	    handleCurrentChange(val) {
	      this.listQuery.pageNum = val
        this.searchTabList()
	    },
	    handleClick(val) {
	      console.log(val)
        console.log('*******************')
	      if(this.activeTabName=='news'){
          this.tarNews = Object.assign({}, val)
        }else{
	        this.tarNews = {...val,title:val.seminarName}
        }
	    },
	    closeFile() {
	      this.dialogInfo = false
	    },
	    showInfo(row) {
	      this.infoMsg = Object.assign({}, row)

	      if (row.is_original === 0) {
	        this.currentView = 'origPreview'
	        this.infoTitle = '原创资讯详情'
	      } else if (row.is_original === 1) {
	        this.currentView = 'intellPreview'
	        this.infoTitle = '智能资讯详情'
	      } else if (row.is_original === 2) {
	        this.currentView = 'roboPreview'
	        this.infoTitle = '机器写稿详情'
	      }
	      this.dialogInfo = true
	    },
	    saveNews() {
	      this.$refs['newsForm'].validate(valid => {
	        if (valid) {
	          const editor = window.tinymce.get(this.tinymceId)
	          // const docmt = editor.dom.doc.body
	          // const myHTML = `<strong data-newsId="${ this.tarNews.news_id }" data-sourceId="${ this.tarNews.source_id }">${ this.tarNews.title }</strong>`
	          // editor.execCommand("mceInsertContent", true, myHTML)
            if(this.activeTabName==='news'){
              editor.insertContent(
                `<strong data-newsId="${this.tarNews.news_id}" data-sourceId="${this.tarNews.source_id}"   style="color: #1478F0;text-decoration: underline;">${this.tarNews.title}</strong>`
              )
            }else{
              editor.insertContent(
                `<strong data-topicId="${this.tarNews.id}"   style="color: #1478F0;text-decoration: underline;">${this.tarNews.seminarName}</strong>`
              )
            }

	          // var selectMarker = docmt.querySelector('#_mce_caret')
	          // editor.selection.select(selectMarker)
	          // editor.execCommand("mceFocus", true, selectMarker)
	          // selectMarker.classList.remove("oomPreMarker")v
	          // var classVal = selectMarker.getAttribute('class');
	          // classVal = classVal.replace("oomPreMarker","");
	          // selectMarker.setAttribute("class", classVal);
	          this.dialogGetNews = false
	          this.$nextTick(() => {
	            this.$refs['newsForm'].clearValidate()
	          })
	        } else {
	          console.log('error submit!!')
	          return false
	        }
	      })
	    },
	    getStockList() {
	      const arr = [
	        { code: '000001.2', dataStatus: 0, name: '上证综指' },
	        { code: '399001.1', dataStatus: 0, name: '深证成指' },
	        { code: '399006.1', dataStatus: 0, name: '创业板指' }
	      ]
	      listStockSc().then(res => {
	        this.stockAll = res.Data
	        this.stockAll = this.stockAll.concat(arr)
	      })
	    },
	    filterMethod(query) {
	      if (query !== '') {
	        let result = this.stockAll.filter(item => {
	          return item.name.indexOf(query) > -1 || item.code.indexOf(query) > -1 || pinyin(item.name, {
	            style: pinyin.STYLE_FIRST_LETTER,
	            heteronym: true
	          }).join('').indexOf(query) > -1
	        }).sort((a, b) => a.name.length - b.name.length)
	        if (result.length >= 100) {
	          this.$message({ message: '菜单超过100条，只显示前100条，请输入更多信息' })
	          result = result.slice(0, 99)
	        }
	        this.optionStocks = result
	      } else {
	        this.optionStocks = []
	      }
	    },
	    getPreview() {
	      this.$refs['imgForm'].validate(valid => {
	        if (valid) {
	          const _this = this
	          if (this.myChart) this.myChart.clear()
	          if (this.showImg) {
	            this.showImg = false
	            this.previewText = '预览'
            return
          } else {
	            this.previewLoading = true
	          }
	          if (this.imgForm.imgType === 1) {
	            const quer = {
	              code: this.imgForm.code,
	              count: '30',
	              type: '513',
	              tc_isunicode: '2',
	              techname: 'USEMA3|3|5|10|20|'
	            }
	            kxInfo(quer).then(res => {
	              const opt = kxOption(res.Data[0])
	              _this.myChart = echarts.init(_this.$refs['kChart'])
	              _this.myChart.setOption(opt)
	              var imgbase = _this.myChart.getDataURL()
	              uploadSec({ 'file': imgbase }).then(vol => {
	                const location = vol.Data[0].location
	                _this.myBase = location
	                _this.showImg = true
	                _this.previewLoading = false
	                _this.previewText = '关闭预览'
	              }).catch(e => {
	                this.previewLoading = false
	                this.$message({ type: 'error', message: '图片传输失败' })
	              })
	            }).catch(e => {
	              this.previewLoading = false
	              this.$message({ type: 'error', message: '数据获取失败' })
	            })
	          } else if (this.imgForm.imgType === 2) {
	            const obj = {
	              code: this.imgForm.code,
	              date: this.imgForm.date || ''
	            }
	            fsInfo(obj).then(res => {
	              const opt = fsOption(res.Data[0])
	              _this.myChart = echarts.init(_this.$refs['kChart'])
	              _this.myChart.setOption(opt)
	              var imgbase = _this.myChart.getDataURL()
	              uploadSec({ 'file': imgbase }).then(vol => {
	                const location = vol.Data[0].location
	                _this.myBase = location
	                _this.showImg = true
	                _this.previewLoading = false
	                _this.previewText = '关闭预览'
	              }).catch(e => {
	                this.previewLoading = false
	                this.$message({ type: 'error', message: '图片传输失败' })
	              })
	            }).catch(e => {
	              this.previewLoading = false
	              this.$message({ type: 'error', message: '数据获取失败' })
	            })
	          }
	        } else {
	          console.log('error submit!!')
	          return false
	        }
	      })
	    },
	    insertImg() {
	      this.$refs['imgForm'].validate(valid => {
	        if (valid) {
	          const _this = this
	          if (this.myChart) this.myChart.clear()
	          this.insertLoading = true
	          const editor = window.tinymce.get(this.tinymceId)
	          if (this.imgForm.imgType === 1) {
	            const quer = {
	              code: this.imgForm.code,
	              count: '30',
	              type: '513',
	              tc_isunicode: '2',
	              techname: 'USEMA3|3|5|10|20|'
	            }
	            kxInfo(quer).then(res => {
	              const opt = kxOption(res.Data[0])
	              _this.myChart = echarts.init(_this.$refs['kChart'])
	              _this.myChart.setOption(opt)
	              var imgbase = _this.myChart.getDataURL()
	              uploadSec({ 'file': imgbase }).then(vol => {
	                const location = vol.Data[0].location
	                _this.insertLoading = false

	                editor.insertContent(
	                  `<img src="${location}" />`
	                )
	                this.dialogGetImg = false
	                this.$nextTick(() => {
	                  this.$refs['imgForm'].clearValidate()
	                })
	              }).catch(e => {
	                this.insertLoading = false
	                this.$message({ type: 'error', message: '图片传输失败' })
	              })
	            }).catch(e => {
	              this.insertLoading = false
	              this.$message({ type: 'error', message: '数据获取失败' })
	            })
	          } else if (this.imgForm.imgType === 2) {
	            const obj = {
	              code: this.imgForm.code,
	              date: this.imgForm.date || ''
	            }
	            fsInfo(obj).then(res => {
	              const opt = fsOption(res.Data[0])
	              _this.myChart = echarts.init(_this.$refs['kChart'])
	              _this.myChart.setOption(opt)
	              var imgbase = _this.myChart.getDataURL()
	              uploadSec({ 'file': imgbase }).then(vol => {
	                const location = vol.Data[0].location
	                _this.insertLoading = false

	                editor.insertContent(
	                  `<img src="${location}" />`
	                )
	                this.dialogGetImg = false
	                this.$nextTick(() => {
	                  this.$refs['imgForm'].clearValidate()
	                })
	              }).catch(e => {
	                this.insertLoading = false
	                this.$message({ type: 'error', message: '图片传输失败' })
	              })
	            }).catch(e => {
	              this.insertLoading = false
	              this.$message({ type: 'error', message: '数据获取失败' })
	            })
	          }
	        } else {
	          console.log('error submit!!')
	          return false
	        }
	      })
	    },
	    insertVideo() {
	      let formRule = this.videoFileForm.url.trim()
	      const videoUrl = this.videoFileForm.url
	      if (!formRule) {
	        return false
	      }
	      console.log(formRule.startsWith('http://'))
	      console.log(formRule.startsWith('https://'))
	      if (!formRule.startsWith('http://') && !formRule.startsWith('https://')) {
	        this.$message.warning('请输入正确的URL链接')
	        return false
	      }
	      const editor = window.tinymce.get(this.tinymceId)
	      formRule = formRule.split('.')

	      if (formRule.length < 2) {
	        this.$message.warning('你输入的URL链接不正确')
	        return false
	      }

	      formRule = formRule.pop()
	      const videoTypeList = ['mp4', 'ogg', 'flv', 'avi', 'wmv', 'rmvb', 'mov']
	      if (videoTypeList.indexOf(formRule) === -1) {
	        this.$message.warning('请输入视频格式文件URLs链接')
	        return false
	      }
	      editor.insertContent(`<p>
               	<span class="mce-preview-object mce-object-video" contenteditable="false" data-mce-object="video" data-mce-p-allowfullscreen="allowfullscreen" data-mce-p-frameborder="no" 	data-mce-p-scrolling="no" data-mce-p-src=${videoUrl} data-mce-html="%20">
               	  <video src=${videoUrl} style="width: 100%" controls="controls"></video>
               	</span>
            	</p>`)
	      this.dialogGetVideo = false
	    },
	    setUploadVideo() {
	      this.videoFileForm = {
	        file: null,
	        url: ''
	      }
	      this.insertLoading = false
	      this.dialogGetVideo = true
	    },
	    handleTabClick(tab, event) {
        this.listQuery.title = ''
        this.activeTabName = tab.name
        this.searchTabList()
	    },
      searchTabList() {
        if (this.activeTabName === 'news') {
          this.getList()
        } else {
          this.getTopicList()
        }
      },
      checkNews(sta) {
        switch(sta) {
          case 0:
            return '' // '待处理'
          case 1:
            return 'success' // '审核'
          case 2:
            return 'danger' // 2：驳回
        }
      },
      checkNewsStatu(data) {
        switch(data) {
          case 0:
            return '待处理'
          case 1:
            return '已通过'
          case 2:
            return '未通过'
        }
      },
      handleShow(row, str) {
        this.tagLoading = true
        getEdit({ 'id': row.id }).then(res => {
          let val = res.Data[0]
          this.temp = Object.assign({}, val)
          this.dialogTopicStatus = str
          this.tagLoading = false
          this.dialogTopicVisible = true
          this.$nextTick(() => {
            this.$refs['temp'].clearValidate()
          })
        })
      },
    getTopicList() {
      this.listLoading = true
      const params = {
        pageNum: 1,
        pageSize: 20,
        seminarName: this.listQuery.title
      }
      listTopicInfo(params).then(res => {
        this.listLoading = false
        this.tableData = res.Data
        this.total = parseInt(res.PageInfo.Total)
      })
    },
	    // 上传前回调
    beforeUploadVideo(file) {
	      console.log(file)
      var fileSize = file.size / 1024 / 1024 < 200
      if (['video/mp4', 'video/ogg', 'video/flv', 'video/avi', 'video/wmv', 'video/rmvb', 'video/mov'].indexOf(file.type) === -1) {
        this.$message.warning('请上传正确的视频格式')
        return false
      }
      if (!fileSize) {
        this.$message.warning('视频大小不能超过200MB')
        return false
      }
      this.isShowUploadVideo = false
    },
    // 进度条
    uploadVideoProcess(event, file, fileList) {
      this.videoFlag = true
      this.videoUploadPercent = file.percentage.toFixed(0) * 1
    },
    // 上传成功回调
    handleVideoSuccess(res, file) {
      this.isShowUploadVideo = true
      this.videoFlag = false
      this.videoUploadPercent = 0

      // 前台上传地址
      // if (file.status == 'success' ) {
      //    this.videoForm.showVideoPath = file.url;
      // } else {
      //     layer.msg("上传失败，请重新上传");
      // }
	      this.$refs.uploadvideo.clearFiles()
      // 后台上传地址
      if (file.status === 'success') {
	        const editor = window.tinymce.get(this.tinymceId)
        this.videoFileForm.url = res.location
	        // editor.insertContent(`<video style='width:300px;height:200px' src="${ res.location }" />`)
	        editor.insertContent(`<p>
								<span class="mce-preview-object mce-object-video" contenteditable="false" data-mce-object="video" data-mce-p-allowfullscreen="allowfullscreen" data-mce-p-frameborder="no" data-mce-p-scrolling="no" data-mce-p-src=${res.location} data-mce-html="%20">
									<video src=${res.location} style="width: 100%" controls="controls"></video>
								</span>
								</p>`
	        )
	        this.dialogGetVideo = false
      } else {
        this.$message.warning('数据获取失败')
      }
    },
	    // 上传视频
	    uploadVideo(file) {
	      const that = this
	      const content = file
	      const fileSize = file.size / 1024 / 1024 < 200
      if (['video/mp4', 'video/ogg', 'video/flv', 'video/avi', 'video/wmv', 'video/rmvb', 'video/mov'].indexOf(file.type) === -1) {
        this.$message.warning('请上传正确的视频格式')
        return false
      }
      if (!fileSize) {
        this.$message.warning('视频大小不能超过200MB')
        return false
      }

	      const formdata = new FormData()
	      formdata.append('file', content)
	      console.log(that.uplopdFileUrl)

	      var xhr

	      return new Promise((resove, reject) => {
	        xhr = new XMLHttpRequest()
	        xhr.withCredentials = false
	        xhr.open('POST', baseUrl + 'file/oss/content/upload')
	        xhr.setRequestHeader('Authorization', 'Bearer ' + that.$store.getters.token)
	        xhr.onload = function() {
	          var json
	          if (xhr.status !== 200) {
            // eslint-disable-next-line no-undef
	            failure('HTTP Error: ' + xhr.status)
	            return
	          }
	          json = JSON.parse(xhr.responseText)

	          if (!isPord) {
	            if (!json || typeof json.locationUrl !== 'string') {
	              that.videoFileForm.uploaded = false
	              that.$message({ type: 'error', message: '视频传输失败' })
	              reject('error')
	              return
	            }
	            that.videoFileForm.url = json.locationUrl
	            that.videoFileForm.uploaded = true
	            that.dialogGetVideo = false
	            resove(json.locationUrl)
	          } else {
	            if (!json || typeof json.location !== 'string') {
	              that.videoFileForm.uploaded = false
	              that.$message({ type: 'error', message: '视频传输失败' })
	              reject('error')
	              return
	            }
	            that.videoFileForm.url = json.location
	            that.videoFileForm.uploaded = true
	            that.dialogGetVideo = false
	            resove(json.location)
	          }
	        }
	        xhr.send(formdata)
	      })
	    },
      // 上传 海报图片
      uploadPoster(file){
        const that = this
        const content = file
        const fileSize = file.size / 1024 / 1024 < 200
        // console.log(file)
        if (['image/gif', 'image/jpg', 'image/jpeg', 'image/png'].indexOf(file.type) === -1) {
          this.$message.warning('请上传正确的图片格式')
          return false
        }
        if (!fileSize) {
          this.$message.warning('图片大小不能超过200MB')
          return false
        }

        const formdata = new FormData()
        formdata.append('file', content)
        // console.log(that.uplopdFileUrl)

        var xhr

        return new Promise((resove, reject) => {
          xhr = new XMLHttpRequest()
          xhr.withCredentials = false
          xhr.open('POST', baseUrl + 'file/oss/content/upload')
          xhr.setRequestHeader('Authorization', 'Bearer ' + that.$store.getters.token)
          xhr.onload = function() {
            var json
            if (xhr.status !== 200) {
              // eslint-disable-next-line no-undef
              failure('HTTP Error: ' + xhr.status)
              return
            }
            json = JSON.parse(xhr.responseText)

            if (!isPord) {
              if (!json || typeof json.locationUrl !== 'string') {
                that.videoFileForm.posterLoaded = false
                that.$message({ type: 'error', message: '图片传输失败' })
                reject('error')
                return
              }
              that.videoFileForm.posterUrl = json.locationUrl
              that.videoFileForm.posterLoaded = true
              that.dialogGetVideo = false
              resove(json.locationUrl)
            } else {
              if (!json || typeof json.location !== 'string') {
                that.videoFileForm.posterLoaded = false
                that.$message({ type: 'error', message: '图片传输失败' })
                reject('error')
                return
              }
              that.videoFileForm.posterUrl = json.location
              that.videoFileForm.posterLoaded = true
              that.dialogGetVideo = false
              resove(json.location)
            }
          }
          xhr.send(formdata)
        })
      }

	  },
	  // destroyed() {
	  //   this.destroyTinymce()
	  // },
  beforeDestroy() {
	    // console.log('beforeDestroy 执行了吗')
    this.activeTabName="news"
    this.destroyTinymce()
  }
}
</script>

<style lang="stylus" scoped>
	.phone {
		word-break break-all
		margin auto
		width 375px
		height 600px
		overflow-y auto
		&::-webkit-scrollbar {
			display: none;
		}

		.top-bar {
			text-align center
			padding 10px 15px
			margin 0 -20px
			position absolute
			top 0
			width 373px
			background-color #000
			color #fff
			font-size 120%
			font-weight bold
		}

		.title {
			text-align justify
			margin-top 52px
			font-size 110%
			font-weight bolder
		}

		.info {
			font-size 85%
			color #5d5d5d
		}

		.summary {
			text-align justify
			padding 5px 10px
			margin 10px 0 10px
			font-size 90%
			line-height 1.2rem
			color #333
			border-radius 5px
			background-color #ddd
		}

		.content {
			text-align justify
			&:after {
				display: inline-block;
				content: '';
				padding-left: 100%;
			}
		}
	}

  	.pc {
	    word-break break-all
	    line-height 24px
	    font-size: 16px
	    margin auto
	    width 100%
	    height 600px
	    overflow-y auto
	    &::-webkit-scrollbar {
	      	display: none;
	    }
	    .title {
	      	text-align justify
	      	margin-top 12px
	      	font-size 120%
	      	font-weight bolder
	    }
	    .info {
	      	font-size 85%
	      	color #5d5d5d
	    }
	    .summary {
	      	text-align justify
	      	padding 5px 10px
	      	margin 10px 0
	      	font-size 90%
	      	line-height 1.2rem
	      	color #333
	      	border-radius 5px
	      	background-color #ddd
	    }
	    .content {
	      	text-align justify
	      	&:after {
		        display: inline-block;
		        content: '';
		        padding-left: 100%;
	      	}
	    }
  	}

	.tinymce-container {
		position: relative;
	}

	.tinymce-container>>>.mce-fullscreen {
		z-index: 10000;
	}

	.tinymce-textarea {
		visibility: hidden;
		z-index: -1;
	}

	.editor-custom-btn-container {
		position: absolute;
		right: 4px;
		top: 0;
		/*z-index: 2005;*/
    button {
		font-size: 14px;
    }
	}

	.fullscreen .editor-custom-btn-container {
		z-index: 10000;
		position: fixed;
	}

	.editor-upload-btn {
		display: inline-block;
	}

	.chartsDialog {
		/deep/ .el-dialog__body {
			padding: 20px 20px 0 20px;
		}
	}
	.zxForm {
		margin-top: -10px;
		/deep/ .el-form-item {
			margin-bottom: 10px!important;
		}
	}
</style>

<style lang="scss">
	.chooseRow {
		cursor: pointer;
	}
	.mce-tabs {
		display: flex !important;
	}

	.mce-tab:last-child {
		order: -1 !important;
	}

	.panel-body {

		p {
			margin: 0
		}

	}

 .video-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .video-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .video-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .video, .video-uploader{
    width: 178px;
    height: 178px;
    display: block;
  }

  .video-wraper{
	  .tabs{
		width: 160px;
		height: 30px;
		line-height: 28px;
		display: flex;
		font-size: 14px;
		justify-content: flex-start;
		border-top: 1px solid #eee;
		border-bottom: 1px solid #eee;
		border-left: 1px solid #eee;
		margin-bottom: 20px;
		.tab-item{
			display: inline-block;
			padding: 0 10px;
			border-right: 1px solid #eee;
			cursor: pointer;
			&:hover,&.actived{
				background: #cb6c2f;
				color: #fff;
			}
		}
	  }
  }
</style>
